<script setup lang="ts" name="BetChoice">
import API from "@/api";
import { userinfo } from "@/store";
import { cloneDeep } from "lodash";
import { colors } from "@/const/color";
import BetResult from "./BetResult.vue";
const route = useRoute();
const { t } = useI18n();
const piniaUserinfo: any = userinfo();

const global: any = getCurrentInstance()?.appContext.config.globalProperties;
const images = reactive({
  inputMoney: new URL(
    "@/assets/images/ColorfulLottery/inputMoney.png",
    import.meta.url
  ).href,
  inputMoneyActive: new URL(
    "@/assets/images/ColorfulLottery/inputMoneyActive.png",
    import.meta.url
  ).href,
  prize1: new URL("@/assets/images/Race/prize1.png", import.meta.url).href,
  prize2: new URL("@/assets/images/Race/prize2.png", import.meta.url).href,
});
const emits = defineEmits(["update:actCards", "handleMap"]);
const props = defineProps({
  lotteryList: {
    type: Array<any>,
  },
  isStart: {
    type: Boolean,
    default: false,
  },
  actCards: {
    type: Array<any>,
    default: [],
  },
  mapStatus: {
    type: Number,
  },
});

const data: any = reactive({
  moneyList: [
    {
      label: "50",
      value: 50,
    },
    {
      label: "100",
      value: 100,
    },
    {
      label: "1k",
      value: 1000,
    },
    {
      label: "5k",
      value: 5000,
    },
    {
      label: "10k",
      value: 10000,
    },
  ],
  moneyIndex: 0,
  isShowInput: false,
  nowMoney: 50,
  activeCard: 1, // 当前选择号码
  money: "",
});

const { moneyList, moneyIndex, isShowInput, nowMoney, activeCard, money } =
  toRefs(data);

// 投注列表
const cardList = computed(() => {
  return props.lotteryList
    ?.filter((it: any) => it.numbers.includes(activeCard.value))
    .sort((a, b) => a.numbers.length - b.numbers.length);
});

const handleMoney = (item: any, index: number) => {
  moneyIndex.value = index;
  isShowInput.value = false;
  nowMoney.value = item.value;
};
const setCurrentMoney = (e: any) => {
  nowMoney.value = +e.target.value;
};
const handleInput = () => {
  isShowInput.value = true;
  moneyIndex.value = -1;
};

// 单个金额
const singleMoney = (item: any) => {
  if (nowMoney.value < item.singleMinMoney) {
    nowMoney.value = item.singleMinMoney;
  } else if (nowMoney.value >= item.singleMaxMoney) {
    nowMoney.value = item.singleMaxMoney;
  }
  return nowMoney.value;
};

// 选择号码
const handleActiveCard = (value: number) => {
  activeCard.value = value;
};

// 是否有下注的
const activeClass = (item: any) => {
  return !!props.actCards?.find((it: any) => it?.id == item?.id);
};

// 选择投注
const handleActive = (item: any) => {
  // 判断是否超出限制才添加
  const preAll = props.actCards
    .map((it: any) => +it?.money)
    .reduce((a: any, b: any) => a + b, 0);
  let all = +preAll + +nowMoney.value;
  // 余额不足
  if (all > piniaUserinfo.getUserMoney) {
    global.message(`余额不足`, {
      type: "danger",
    });
    return;
  }

  if (all > item?.singleMaxMoney) {
    global.message(`单注金额不能超过${item?.singleMaxMoney}₹`, {
      type: "danger",
    });
    return;
  }
  let temp = cloneDeep(item);
  temp.money = nowMoney.value;
  emits("update:actCards", [...props.actCards, temp]);
};

const singleAll = (item: any) => {
  const all = props.actCards
    .filter((it: any) => it?.id == item?.id)
    .map((it: any) => +it?.money)
    .reduce((a: any, b: any) => a + b, 0);
  return all;
};

// 投注全部
const handleBetAll = () => {
  const preAll = props.actCards
    .map((it: any) => +it?.money)
    .reduce((a: any, b: any) => a + b, 0);
  const curAll = cardList.value
    ?.map((it: any) => +nowMoney.value)
    .reduce((a: any, b: any) => a + b, 0);
  const all = preAll + curAll;
  // 余额不足
  if (all > piniaUserinfo.getUserMoney) {
    global.message(`余额不足`, {
      type: "danger",
    });
    return;
  }
  let currList =
    cardList.value?.map((it: any) => {
      return {
        ...it,
        ...{
          money: +nowMoney.value,
        },
      };
    }) || [];
  emits("update:actCards", [...props.actCards, ...currList]);
};

// 重复投注获取历史投注再次选择投注
const handleBetRepeat = () => {
  const preAll = props.actCards
    .map((it: any) => +it?.money)
    .reduce((a: any, b: any) => a + b, 0);
  const curAll = piniaUserinfo.getRaceRecent
    ?.map((it: any) => +nowMoney.value)
    .reduce((a: any, b: any) => a + b, 0);
  const all = preAll + curAll;
  // 余额不足
  if (all > piniaUserinfo.getUserMoney) {
    global.message(`余额不足`, {
      type: "danger",
    });
    return;
  }
  let currList =
    piniaUserinfo.getRaceRecent?.map((it: any) => {
      return {
        ...it,
        ...{
          money: +nowMoney.value,
        },
      };
    }) || [];
  emits("update:actCards", [...props.actCards, ...currList]);
};

const handleMap = () => {
  emits("handleMap");
};

defineExpose({
  handleBetAll,
  handleBetRepeat,
});
</script>

<template>
  <BetResult v-if="isStart" :actCards="actCards" />
  <div v-else class="betChoice">
    <div>{{  t('bet.bet27') }}</div>
    <div class="moneyNum">
      <div
        class="moneyItem"
        v-for="(el, index) in moneyList"
        :key="index"
        :class="{ moneyActive: moneyIndex === index }"
        @click="handleMoney(el, index)"
      >
        {{ el?.label }}
      </div>
      <div class="inputMoney">
        <img
          v-if="!isShowInput"
          :src="images.inputMoney"
          alt=""
          @click="handleInput"
        />
        <img v-else :src="images.inputMoneyActive" alt="" />
        <input
          v-model="money"
          @input="setCurrentMoney"
          v-if="isShowInput"
          type="number"
          :placeholder="t('bet.test57')"
        />
      </div>
    </div>
    <div class="rankPoker">
      <div
        class="pokerItem"
        v-for="(item, index) in colors"
        :key="index"
        :style="{
          backgroundColor: item.bg,
          borderColor: item.border,
        }"
        :class="{
          active: index === activeCard - 1,
        }"
        @click="handleActiveCard(index + 1)"
      >
        {{ index + 1 }}
      </div>
    </div>
    <div class="cardList">
      <div
        class="cardItem"
        v-for="(item, index) in cardList"
        :key="index"
        :class="{
          active: activeClass(item),
        }"
        @click="handleActive(item)"
      >
        <div class="types">
          <img :src="images.prize1" alt="" />
          <template v-if="item?.numbers.length > 1">
            &nbsp;/
            <img :src="images.prize2" alt="" />
          </template>
        </div>
        <div class="rankList">
          <div
            class="rankItem"
            v-for="(it, i) in item?.numbers"
            :key="i"
            :style="{
              backgroundColor: colors[it - 1].bg,
              borderColor: colors[it - 1].border,
            }"
          >
            {{ it }}
          </div>
        </div>
        <div class="single">{{ Number(item?.oddsRatio).toFixed(2) }}</div>
        <div class="moneyLabel">{{  t('bet.bet28') }}</div>
        <div class="money">{{ singleAll(item) }}</div>
      </div>
    </div>
    <div class="betBtns">
      <van-button
        :disabled="isStart"
        round
        class="btn"
        @click="handleMap"
      >
      {{  t('bet.bet29') }}
      </van-button>
      <div class="status">
        <span
          :style="{ bottom: mapStatus ? `calc(${mapStatus}% - 10rem)` : 0 }"
        ></span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
